<script lang="ts" setup>
import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()
const checked = ref(false)
const form = reactive({
  username: 'admin',
  passsword: '123456'
})

const onLogin = () => {
  console.log(storeToRefs(userStore))
}
</script>

<template>
  <div class="relative wh-full flex-center">
    <el-card class="z-1 w-100 !rounded-4% <sm:w-80" shadow="never">
      <h3 class="mt-6 font-500 text-primary text-18px">登录</h3>
      <el-form class="mt-6" :model="form" label-position="top" size="large">
        <el-form-item>
          <el-input v-model="form.username" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.passsword" show-password placeholder="请输入密码" />
        </el-form-item>
        <el-form-item>
          <div class="w-full flex-y-center justify-between">
            <el-checkbox v-model="checked">记住密码</el-checkbox>
            <el-text type="primary">忘记密码?</el-text>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button class="w-full" type="primary" @click="onLogin">登录</el-button>
        </el-form-item>
        <el-form-item>
          <el-button class="w-full">注册</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<style></style>
